<template>
<div class="sidebar-fixed">
  <van-Loading v-if="showLoading"></van-Loading>
  <a-sidebar v-else :items="items" :activeKey="activeKey" replace @change="changeSidebar">
  </a-sidebar>
</div>
</template>
<script>
import codeApi from '@/api/code'
export default {
  data() {
    return {
      // activeKey: "0",
      items: [],
      showLoading: true
    };
  },
  computed: {
    activeKey() {
      return this.$store.state.app.activeKey
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      codeApi.get().then(res => {
        const result = res.result
        this.items = this.handleList(result);
        this.finished();
      })
    },
    handleList(arr) {
      let alpha_dict = new Object();
      let factories = new Array();
      for (var i = 0; i < arr.length; i++) {
        let factory = arr[i];
        let key = factory.key;
        if (alpha_dict[key] == undefined) {
          factories.push({
            "key": key,
            "children": [factory]
          });
          alpha_dict[key] = factories.length - 1;
        } else {
          factories[alpha_dict[key]].children.push(factory);
        }
      }
      return factories;
    },
    changeSidebar(index) {
      this.$store.dispatch('app/setActiveKey', '' + index)
    },
    finished() {
      this.showLoading = false;
      this.$emit('finished')
    }
  },
};
</script>
